<template>
	<view>

		<view class="header">
			<view class="header-left">
				<view class="header-left-shopname">{{curShop.sname}}</view>
				<uni-icons type="forward" size="20" color="#777"></uni-icons>

			</view>
			<view class="header-right">
				<input type="text" class="header-right-mysearch" placeholder="请输入搜索关键字" />
				<view class="header-right-searchicons">
					<uni-icons type="search" size="22"></uni-icons>
				</view>

			</view>
		</view>
		<!-- heard结束-->
		<!-- main开始-->
		<view class="main">
			<!-- 商品类型 -->
			<view class="main-left">
				<scroll-view class="main-left-categroy" scroll-y="true">
					<view class="main-left-categroy-item" :class="index==categoryActiveIndex?'active':''"
						v-for="(category,index) in categoryList" :key="index" @click="clickcategory(index)">
						<image :src="category.cgicon" class="main-left-categroy-icon"></image>
						<view class="main-left-categroy-cgname">
							{{category.cgname}}
						</view>
						<view class="main-left-categroy-line" v-if="index==categoryActiveIndex"></view>

					</view>
				</scroll-view>
			</view>
			<!-- 商品类型 -->

			<!-- 商品列表 -->
			<view class="main-right">
				<scroll-view class="main-right-goods" scroll-y="true" :scroll-into-view="'cview'+categoryActiveIndex"
					scroll-with-animation="yes">
					<view v-for="(category,index) in categoryList" :key="index" :id="'cview'+index">
						<!-- 商品类型 -->
						<view class="main-right-goods-cgname">{{category.cgname}}</view>
						<!-- 商品类型 -->

						<!-- 商品详细列表 -->
						<view class="main-right-goods-item" v-for="(item,itemindex) in category.goods"
							@click="openGoods(item)">
							<view class="main-right-goods-img">
								<image :src="item.icon"></image>
							</view>
							<view class="main-right-goods-content">
								<view class="main-right-goods-content-gname">{{item.gname}}</view>
								<view class="main-right-goods-content-content1">{{item.content}}</view>
								<view class="main-right-goods-content-price">
									<view>
										<text class="pricedanwei">￥</text><text class="price">{{item.price}}</text>
										<text class="qprice" v-if="item.jialiao.length>0">起</text>
									</view>
									<view>
										<uni-icons type="plus-filled" size="28" color="red"></uni-icons>
									</view>

								</view>
							</view>
						</view>
						<!-- 商品详细列表 -->
					</view>
				</scroll-view>
			</view>
			<!-- 商品列表 -->
		</view>
		<!-- main结束-->

		<!-- 购物车结算 -->
		<view class="cart-pay">
			<view class="cart-pay-left" @click="showCartList">
				<image src="http://www.itlaobing.com/ice/other/other001.png" class="cart-pay-left-img"></image>
				<view class="badge" v-if="cartList.buyTotalNums>0">{{cartList.buyTotalNums}}</view>
			</view>

			<view class="cart-pay-price-btn">
				<text class="cart-pay-price-text">合计</text>
				<text class="cart-pay-price-danwei">￥</text>
				<text class="cart-pay-price-allprice">{{cartList.allPrice}}</text>
				<button @click="payconfirm" class="cart-pay-btn" :class="cartList.goods.length>0?'active':''"
					type="default" plain="true" :disabled="cartList.goods.length<=0">去结算</button>
			</view>

		</view>
		<!-- 购物车结算结束 -->

		<!-- 当前商品的弹出框 -->
		<uni-popup ref="popup">
			<view class="popup-content">
				<!--  控制关闭按钮 -->
				<view class="closebtn" @click="closegoodspopup">
					<uni-icons type="clear" size="33" color="#CCC"></uni-icons>
				</view>

				<!--  控制关闭按钮 -->
				<GoodsPopup :cgoods="curSelectGoods" :ccartlist="cartList"></GoodsPopup>
			</view>
		</uni-popup>
		<!-- 当前商品的弹出框 -->

		<!-- 购物车列表开始 -->
		<uni-popup ref="downpopup" type="bottom" style="z-index: 50;">
			<CartListC :ccartlist="cartList"></CartListC>
		</uni-popup>
		<!-- 购物车列表结束 -->
	</view>
</template>

<script>
	import GoodsPopup from "@/components/goodspopup/goodspopup.vue" //导入组件，@是当前站点
	import CartListC from "@/components/cartlist/cartlist.vue"
	import fDate from "@/common/utils/formatDateUtil.js"
	const app = getApp()
	export default {
		data() {
			return {
				curShop: {},
				categoryList: [],
				categoryActiveIndex: 0,
				curSelectGoods: {},
				cartList: {
					cartid: 0,
					cid: app.globalData.cid,
					sid: 0,
					buyTotalNums: 0,
					allPrice: 0,
					goods: []
				},
				isUpdate: false
			}
		},
		components: { //注册引进来的组件
			GoodsPopup,
			CartListC
		},
		onLoad(params) { //页面加载执行，只执行一次
			//console.log(params.sid)
			//获取当前选中的门店
			this.curShop = uni.getStorageSync("curshop")
			this.cartList.sid = this.curShop.sid
			//console.log(this.curShop)//打印到控制台
			//获取商品列表
			this.getGoodsList();
			//获得当前门店用户的购物车数据
			this.getCartList()
		},
		onShow() {
			uni.$on('addcarts', data => {
				this.isUpdate = true
				this.cartList = data
				console.log(this.cartList)
				if (this.cartList.goods == undefined || this.cartList.goods.length <= 0)
					this.closeCartList()
			})
		},
		onUnload() {
			//获取服务器端购物车的数据
			if (this.isUpdate)
				this.updateCart()
		},
		onHide() {
			if (this.isUpdate)
				this.updateCart()
		},
		methods: {
			getGoodsList() { //在远程取数据
				uni.request({
					url: app.globalData.baseUrl + '/category/getlist',
					success: (result) => {
						this.categoryList = result.data.mydata
						//console.log(this.categoryList)
					}
				})
			},
			getCartList() {
				//获得当前门店的用户购物车数据
				uni.request({
					url: app.globalData.baseUrl + "/cart/getcart/" + app.globalData.cid + "/" + this.curShop.sid,
					success: (result) => {
						if (result.data.statusCode == 200) {
							this.cartList = result.data.mydata
						}
					}
				})
			},

			payconfirm() {
				/**
				 * 实现思路
				 * 1.判断购物车是否已向服务器更新数据，如果没有就去更新数据
				 * 2.产生新订单
				 * 3.保存订单
				 */
				//1.
				if (this.isUpdate)
					this.updateCart()
				//2.
				this.addorder()
			},
			addorder() {
				/**
				 * 1.产生新订单
				 * 2.保存订单
				 */

				let curOrder = {}
				//订单id
				let mydate = new Date()
				curOrder.orderid = app.globalData.cid + mydate.getTime()
				curOrder.ordertime = fDate.formatTime(mydate); //'订单时间',
				curOrder.cid = app.globalData.cid //'客户id',
				curOrder.sid = this.curShop.sid //'门店id',
				curOrder.paytime = ""
				curOrder.orderstatus = 0 //订单状态 0.待支付 1.已支付 2.制作中 3.已完成 4.已取消 5.退单
				curOrder.orderstatusStr = "待支付"
				curOrder.buyTotalNums = this.cartList.buyTotalNums //购物数量
				curOrder.allPrice = this.cartList.allPrice //购物车的合计
				curOrder.cartid = this.cartList.cartid //购物车id

				// === 为工作人员准备操作属性
				curOrder.takeCode = -1 // 取餐号码
				curOrder.beizhu = "" // 备注
				curOrder.startMakeTime = "" //记录工作人员开始制作奶茶时间
				curOrder.completeTime = "" //记录工作人员制作完成奶茶时间

				curOrder.shop = this.curShop //门店
				curOrder.goods = this.cartList.goods //购物列表
				console.log(curOrder)

				//2.保存订单
				uni.request({
					url: app.globalData.baseUrl + "/orders/addorders",
					method: 'POST',
					data: curOrder,
					success: (result) => {
						uni.navigateTo({
							url: "../payconfirm/payconfirm?orderid=" + curOrder.orderid
						})
					}
				}) 

			},
			updateCart() {
				//更新服务器端购物车的数据
				if (this.cartList.goods.length > 0) { //更新购物车
					uni.request({
						url: app.globalData.baseUrl + "/cart/updatecart",
						method: 'POST',
						data: this.cartList,
						success: (result) => {
							if (result.data.statusCode == 200) {
								this.cartList = result.data.mydata
							}
						}
					})
				} else {
					uni.request({
						url: app.globalData.baseUrl + "/cart/delcart/" + this.cartList.cartid
					})

				}
			},
			clickcategory(activeIndex) {
				//console.log("clickcategory")
				this.categoryActiveIndex = activeIndex
			},
			openGoods(item) {
				//console.log("aaa")
				this.curSelectGoods = item
				this.$refs.popup.open('center')
			},
			closegoodspopup() {
				this.$refs.popup.close()
			},
			showCartList() {
				if (this.cartList.goods.length > 0)
					this.$refs.downpopup.open()
			},
			closeCartList() {
				this.$refs.downpopup.close()
			}
		}
	}
</script>

<style lang="scss">
	body {
		background-color: #fff;
	}

	.header {
		width: 100vw;
		height: 80rpx;
		background-color: #fff;
		display: flex;

		.header-left {
			width: 55%;
			height: 100%;

			display: flex;
			line-height: 80rpx;
			padding-left: 20px;
			box-sizing: border-box;

			.header-left-shopname {
				font-size: 28rpx;
				font-weight: bold;
				color: #777;
			}
		}

		.header-right {
			width: 55%;
			height: 100%;
			position: relative;

			.header-right-mysearch {
				width: 90%;
				height: 80%;
				border-radius: 32rpx;
				background-color: #eee;
				padding-left: 80rpx;
				box-sizing: border-box;
				font-size: 25rpx;
			}

			.header-right-searchicons {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top: 12rpx;
				left: 26rpx;
			}
		}
	}

	.main {
		width: 100%;
		display: flex;
		height: 78vh;
		background-color: #fff;

		.main-left {
			width: 25%;
			background-color: blue;
			height: 100%;

			.main-left-categroy {
				width: 100%;
				height: 100%;
				background-color: #f8f8f8;

				.main-left-categroy-icon {
					width: 80rpx;
					height: 70rpx;
				}

				.main-left-categroy-cgname {}

				.main-left-categroy-item {
					width: 100%;
					height: 130rpx;
					margin-bottom: 10rpx;
					text-align: center;
					font-size: 28rpx;
					color: #777;
					position: relative;
				}

				.active {
					background-color: #fff;
				}

				.main-left-categroy-line {
					width: 6rpx;
					height: 60rpx;
					background-color: red;
					position: absolute;
					top: 20rpx;
					left: 0rpx;
				}
			}
		}

		.main-right {
			width: 75%;
			height: 100%;

			.main-right-goods {
				width: 100%;
				height: 100%;

				.main-right-goods-cgname {
					font-size: 28rpx;
					color: #777;
				}

				.main-right-goods-item {
					width: 94%;
					height: auto;
					display: flex;
					margin: 20rpx auto;

					.main-right-goods-img image {
						width: 170rpx;
						height: 176rpx;
					}

					.main-right-goods-content {
						width: 95%;
						height: 100%;
						padding-left: 10rpx;
						box-sizing: border-box;

						.main-right-goods-content-gname {
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
						}

						.main-right-goods-content-content1 {
							width: 340rpx;
							font-size: 26rpx;
							color: #999;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							padding-top: 10rpx;
						}

						.main-right-goods-content-price {
							padding-top: 45rpx;
							display: flex;
							justify-content: space-between;

							.pricedanwei {
								font-size: 26rpx;
							}

							.price {
								font-size: 32rpx;
							}

							.qprice {
								color: #999;
								font-size: 23rpx;
								padding-left: 5rpx;
							}
						}
					}

				}
			}
		}
	}

	.popup-content {
		width: 93vw;
		max-height: 90vh;
		border-radius: 20rpx;
		border: 2rpx solid #ccc;
		background-color: #fff;
		overflow: hidden;
		z-index: 70;
		padding: 30rpx;
		box-sizing: border-box;

		.closebtn {
			width: 54rpx;
			height: 54rpx;
			position: absolute;
			top: 20rpx;
			right: 30rpx;
			z-index: 75;
		}
	}

	.cart-pay {
		width: 100vw;
		height: 120rpx;
		background-color: #fff;
		border-top: 2rpx solid #eee;
		position: fixed;
		bottom: 0;
		display: flex;
		padding: 15rpx;
		box-sizing: border-box;
		justify-content: space-between;
		z-index: 60;

		.cart-pay-left {
			display: flex;
			position: relative;


			.cart-pay-left-img {
				width: 80rpx;
				height: 94rpx;
			}

			.badge {
				width: 30rpx;
				height: 30rpx;
				background-color: orange;
				color: #fff;
				font-size: 26rpx;
				border-radius: 0 15rpx 15rpx 15rpx;
				text-align: center;
				line-height: 25rpx;
				position: absolute;
				top: -3rpx;
				left: 68rpx;
			}
		}

		.cart-pay-price-btn {
			width: 400rpx;
			height: 50px;
			display: flex;
			justify-content: flex-end;
			line-height: 50px;

			.cart-pay-price-text {
				font-size: 26rpx;
				color: #333333;
			}

			.cart-pay-price-danwei {
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
			}

			.cart-pay-price-allprice {
				font-size: 38rpx;
				color: #333333;
				font-weight: bold;
				line-height: 46px;
			}

			.cart-pay-btn {
				width: 260rpx;
				height: 45px;
				margin-right: 0;
				font-size: 34rpx;
			}

			.active {
				background-color: #E60012;
				color: #FFFFFF;
				border: none;
			}
		}

	}
</style>
